<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 表单 </el-breadcrumb-item>
                <el-breadcrumb-item>添加用户</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form"  label-width="100px">
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="用户名">
                                <el-input v-model="user.username"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="密码" label-width="100px">
                                <el-input v-model="user.password"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="名字">
                                <el-input v-model="user.realName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="年龄" label-width="100px">
                                <el-input v-model="user.age"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="电话">
                                <el-input v-model="user.telPhone"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="微信" label-width="100px">
                                <el-input v-model="user.weixin"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="学校">
                                <el-select v-model="user.schoolId" placeholder="请选择">
                                    <el-option key="bbk" label="不属于学校" value="-1"></el-option>
                                    <el-option
                                        v-for="(school, index) of schoolList"
                                        :key="index"
                                        :label="school.schoolName"
                                        :value="school.schoolId"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="学科" label-width="100px">
                                <el-select v-model="user.subjectId" placeholder="请选择">
                                    <el-option key="bbk" label="不属于学科" value="-1"></el-option>
                                    <el-option
                                        v-for="(subject, index) of subjectList"
                                        :key="index"
                                        :label="subject.subjectName"
                                        :value="subject.subjectId"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="QQ">
                        <el-input style="width: 400px" v-model="user.qq"></el-input>
                    </el-form-item>

                    <el-form-item label="性别">
                        <el-radio v-model="user.sex" label="0">男</el-radio>
                        <el-radio v-model="user.sex" label="1">女</el-radio>
                        <el-radio v-model="user.sex" label="2">其他</el-radio>
                    </el-form-item> 


                    <el-form-item label="头像">
                        <el-upload
                            class="avatar-uploader"
                            :show-file-list="false"
                            :auto-upload="false"
                            action=""
                            :on-change="fileChange"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                        >
                            <img width="178" v-if="imageUrl" :src="imageUrl" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            <div>请上传jpg或者png的图片</div>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label="角色">
                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                        <div style="margin: 15px 0"></div>
                        <el-checkbox-group v-model="user.roleIds" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="(role, index) in roleList" :label="role.roleId" :key="index">{{
                                role.roleDes
                            }}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">添加用户</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import bus from '../common/bus';
export default {
    name: 'baseform',
    data() {
        return {
            file:[],
            schoolList: [],
            roleList: [],
            subjectList: [],
            imageUrl: '',
            user: {
                sex: '1',
                username:'',
                password:'',
                realName:'',
                telPhone:'',
                weixin:'',
                qq:'',
                subjectId:'',
                schoolId:'',
                roleIds:[],
                age:18
            },
            checkAll: false,
            isIndeterminate: true
        };
    },
    beforeMount() {
        //使用这个生命周期的勾子函数来初始化数据
        this.initSchoolAndRoleAndSubject();
    },
    methods: {
        //初始化咋们的数据
        initSchoolAndRoleAndSubject() {
            this.$axios.get('/api/useraddservice/useradds/addUserInit.action').then(
                (resp) => {
                    if (!resp.data.code) {
                        this.schoolList = resp.data.dataMap.schoolList;
                        this.roleList = resp.data.dataMap.roleList;
                        this.subjectList = resp.data.dataMap.subjectList;
                    } else {
                        this.$message.error('初始化数据失败...');
                    }
                },
                (error) => {
                    this.$message.error('初始化数据失败...:' + error.message);
                }
            );
        },
        onSubmit() {
            
            //这里需要添加用户
            //这里需要使用表单进行上传(上传的既有图片还有文字)
            //首先是要准备数据
            var form1=new FormData();
            //接下来向里面放数据
            form1.append("file",this.file,this.file.name);
            form1.append("username",this.user.username);
            form1.append("password",this.user.password);
            form1.append("realName",this.user.realName);
            form1.append("telPhone",this.user.telPhone);
            form1.append("weixin",this.user.weixin);
            form1.append("qq",this.user.qq);
            form1.append("subjectId",this.user.subjectId);
            form1.append("schoolId",this.user.schoolId);
            form1.append("roleIds",this.user.roleIds);
            form1.append("age",this.user.age);
            form1.append("sex",this.user.sex);
            //接下来就是使用axios来上传这个数据
            this.$axios({
                method: 'POST',
                url: '/api/userservice/users/addUser.action',
                data: form1,
                header: {
                    'Content-Type': 'multipart/form-data'  //这个叫做以表单的形式上传数据
                }
            }).then(
                resp=>{
                    if(!resp.data.code){
                        //说明添加成功...
                        this.$message.success('添加成功！');
                        bus.$emit("close_current_tags");
                    }
                },error=>{
                    this.$message.success('添加失败！');
                }
            )
           
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        fileChange(file, fileList){
            //只要文件的内容发生改变 那么这里就将文件的内容复制给这个对象
           this.file=file.raw;
           this.imageUrl=URL.createObjectURL(this.file)
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },

        handleCheckAllChange(val) {
            this.checkedCities = val ? cityOptions : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        }
    }
};
</script>


<style scoped>
.el-form-item /deep/ .el-upload--picture-card {
    width: 230px;
    height: 150px;
}

.el-form-item /deep/ .el-upload {
    width: 230px;
    height: 150px;
    line-height: 100px;
}

.el-form-item /deep/ .avatar {
    width: 230px;
    height: 150px;
    display: block;
}
</style>